<template>
  <el-container>
    <!-- <el-header style="background-color: #000000;">员工管理</el-header> -->
    <el-main>
      <el-form :inline="true" :model="pageObject" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="pageObject.userName" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-select v-model="pageObject.departmentName" placeholder="请选择部门">
            <el-option label="不限" value="不限"></el-option>
            <el-option label="人力资源部" value="人力资源部"></el-option>
            <el-option label="市场部" value="市场部"></el-option>
            <el-option label="研发部" value="研发部"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadData">查询</el-button>
          <el-button type="primary" @click="add">新增员工</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="list" stripe style="width: 100%;">
        <!-- 列 -->
        <el-table-column label="员工编号" prop="userNum" width="180" align="center"></el-table-column>
        <el-table-column label="员工姓名" prop="userName" width="160" align="center"></el-table-column>
        <el-table-column label="姓别" prop="sex" width="140" align="center"></el-table-column>
        <el-table-column label="部门" prop="departmentName" width="180" align="center"></el-table-column>
        <el-table-column label="电话" prop="phone" width="180" align="center"></el-table-column>
        <el-table-column label="邮箱" prop="email" align="center"></el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <!-- slot-scope 插槽属性，用来获取迭代变量 -->
          <template slot-scope="x">
            <el-button type="success" size="mini" @click="update(x.row)">编辑</el-button>
            <el-button type="warning" size="mini" @click="del(x.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pageObject.page" :page-sizes="[5, 10, 20, 40]" :page-size="5"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>

      <!-- 新增、修改弹出框 -->
      <el-dialog :title="title" width="50%" :visible.sync="isShow">
        <el-form :model="user" label-width="80px">
          <el-form-item label="姓名">
            <el-col :span="8">
              <input type="hidden" v-model="user.userId">
              <el-input v-model="user.userName"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="user.sex" placeholder="请选择性别">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部门">
            <el-select v-model="user.departmentName" placeholder="请选择部门">
              <el-option label="人力资源部" value="人力资源部"></el-option>
              <el-option label="市场部" value="市场部"></el-option>
              <el-option label="研发部" value="研发部"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="权限">
            <el-select v-model="user.roles" placeholder="请选择权限">
              <el-option label="管理员" value="管理员"></el-option>
              <el-option label="员工" value="员工"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电话">
            <el-col :span="20">
              <el-input v-model="user.phone"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-col :span="20">
              <el-input v-model="user.email"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="success" size="mini" @click="save">保存</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
  export default {
    data() {
      return {
        list: [], //当前页集合
        totalPage: "", //总页数
        total: 0, //总条数
        pageObject: { //分页对象
          page: 1,
          row: 5,
          userName: "",
          departmentName: "",
        },
        title: "新增",
        isShow: false,
        isOption: true,
        user: {
          userId: 0,
          userNum: "",
          userName: "",
          userPwd: "",
          sex: "",
          phone: "",
          email: "",
          departmentId: 0,
          departmentName: "",
          salt: "",
          roleId: 0,
          roles: "",
          code:""
        },
      }
    },
    methods: {
      //加载数据
      loadData() {
        if(this.pageObject.departmentName=='不限'){
          this.pageObject.departmentName="";
        }
        var self = this;
        this.$http.get("http://localhost:8080/user/query", {
            params: this.pageObject
          })
          .then(function(rs) {
            if (rs.data.success) {
              self.list = rs.data.data.list;
              console.log(self.list);
              self.totalPage = rs.data.data.totalPage;
              self.total = rs.data.data.total;
            }
          })
      },
      // 下拉框触发事件
      handleSizeChange(v) {
        this.pageObject.row = v;
        this.loadData();
      },
      handleCurrentChange(v) {
        this.pageObject.page = v;
        this.loadData();
      },
      //打开新增弹窗
      add() {
        this.isShow = true;
        this.title = "新增";
        //清空
        this.user = {
          sex: "男",
          departmentName: "人力资源部",
        };
      },
      //打开修改弹窗
      update(obj) {
        this.isShow = true;
        this.title = "修改";
      },
      save() {
        if (this.user.roles == "管理员") {
          this.user.roleId = 1;
        } else if (this.user.roles == "员工") {
          this.user.roleId = 2;
        }
        if (this.user.roleId == 1) {
          this.user.roles = "管理员";
        } else if (this.user.roleId == 2) {
          this.user.roles = "员工";
        }
        console.log(this.user);
        this.$confirm("你确定要" + this.title + "吗", "提示")
          .then(() => {
            var url = "";
            if (this.title == "新增") {
              url = "http://localhost:8080/user/add";
            } else {
              url = "http://localhost:8080/user/update";
            }
            var self = this;
            this.$http.get(url, {
                params: this.user
              })
              .then(function(rs) {
                self.$message(rs.data.info);
                if (rs.data.success) {
                  //关闭弹窗
                  self.isShow = false;
                  //刷新数据
                  self.loadData();
                }
              })
          })
          .catch(() => {
            this.$message('您已取消操作');
          })
      },
      del(obj) {
        var self = this;
        this.$confirm("你确定要删除吗", "提示")
          .then(() => {
            //ajax请求
            self.$http.get("http://localhost:8080/user/del", {
                params: obj
              })
              .then(function(rs) {
                self.$message(rs.data.info);
                if (rs.data.success) {
                  //刷新数据
                  self.loadData();
                }
              })
          })
          .catch(() => {
            this.$message('您已取消操作');
          });
      }
    },
    mounted() {
      this.loadData();
    }
  }
</script>

<style>
</style>
